<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class='loginWrapper'>
    <div class="borderLoginMiddle">
        <div class="loginMiddle">
            <div class="logoWrapper">
                <div class="topLeft" :style="{backgroundImage:`url(${logoImageUrl})`}" @click="handleGoHome()"></div>
                <div class="userDesc">欢迎注册</div>
            </div>
        </div>
    </div>
    <div class="regeisterWrapper">
        <div class="regeisrerMiddle">
            <div class="regeisterForm">
                <div class="loginShowTitle">
                    <p>欢迎注册</p>
                    <p>━━━REGLSTER━━━</p>
                </div>
                <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 40px;">
                    <el-form-item prop="phone">
                        <el-input v-model="loginForm.phone" placeholder="请输入手机号">
                            <template slot="prepend"><i class="icon iconfont icon-icon-"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" :maxlength="16" :minlength="6">
                            <template slot="prepend"><i class="icon iconfont icon-mima"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.repassword" placeholder="再次请输入密码" type="password" :maxlength="16" :minlength="6">
                            <template slot="prepend"><i class="icon iconfont icon-mima"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="phoneVerification">
                        <div class="phoneVerificationCode">
                        <el-input v-model="loginForm.validateCode" placeholder="请输入收到的验证码">
                            <template slot="prepend"><i class="icon iconfont icon-yanzhengma"></i></template>
                        </el-input>
                        <div class="phoneVerficationImage" @click="getValidate()">{{validateName}}</div>
                        </div>
                    </el-form-item>
                    <div class="agreeText">
                        <div>
                            <el-checkbox v-model="checked">同意<span>注册协议</span>
                            </el-checkbox>
                        </div>
                        <div>
                            <a @click="goToLogin()"><span class="loginText">已有账号登录</span></a>
                        </div>
                    </div>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%; margin: 30px 0" @click="submitForm()">立即注册</el-button>
                    </el-form-item>
                    </el-form>
            </div>
        </div>
    </div>
    <div class="loginBottom">
       <span> © 2018 www.showapi.com ALL Rights Reserved. 中国联通集团 版权所有 贵ICP备14007554号</span>
    </div>
  </div>
</transition>
</template>

<script>
import logoImg from '@/assets/logo.png'
export default {
  name: 'Regeister',
  data () {
    return {
      checked: false,
      validateName: '',
      logoImageUrl: logoImg,
      loginForm: {
        phone: '',
        password: '',
        repassword: '',
        validateCode: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
  },
  components: {
  },
  created () {
    document.title = '注册-API商城'
  },
  methods: {
    goToLogin () {
      this.$router.push('/login')
    },
    goToRegister () {
      this.$router.push('/regeister')
    },
    handleGoHome () {
      this.$router.push('/home')
    },
    submitForm () {
      const _self = this
      if (this.loginForm.password !== this.loginForm.repassword) {
        _self.$message({
          showClose: true,
          message: '两次输入的密码不一致',
          type: 'error'
        })
        return
      } else if (this.loginForm.validateCode === '' || this.loginForm.validateCode === null) {
        _self.$message({
          showClose: true,
          message: '未验证手机验证码',
          type: 'error'
        })
        return
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _self.loading = true
          _self.$http.post(`/v1/sms/${_self.loginForm.phone}/${_self.loginForm.validateCode}`, null).then(data => {
            _self.loading = false
            _self.$http.post('/v1/phoneRegister', {phone: _self.loginForm.phone, password: _self.loginForm.password}).then(data => {
              this.$store.commit('setUserInfo', data)
              _self.loading = false
              _self.$message({
                showClose: true,
                message: '注册成功',
                type: 'sucess'
              })
              _self.$router.push({
                path: '/login',
                query: {
                  toHome: 2
                }
              })
            }).catch(errMsg => {
              _self.loading = false
              _self.$message({
                showClose: true,
                message: errMsg,
                type: 'error'
              })
            })
          }).catch(errMsg => {
            _self.loading = false
            _self.$message({
              showClose: true,
              message: errMsg,
              type: 'error'
            })
          })
        }
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.loginWrapper {
  background-color #fff
  width 100%
  height 100vh
  overflow hidden
  .borderLoginMiddle {
      border-bottom-style solid
      border-width:1px
      border-color: #E4E4E4
      .loginMiddle {
        padding 20px 0px
        display flex
        justify-content space-between
        width 1200px
        margin 0 auto
        .logoWrapper {
            display flex
            .topLeft {
                cursor pointer
                width 248px
                height 49px
                background-repeat: no-repeat;
                background-size: cover;
            }
            .userDesc {
                font-weight bolder
                font-size 22px
                line-height 49px
            }
        }
        .topRight {
            line-height 49px
            font-size 14px
            color #666
            span {
                cursor pointer
            }
        }
    }
  }
  .regeisterWrapper {
      margin-top 50px
      .regeisrerMiddle {
          width 1200px
          margin 0 auto
          .regeisterForm {
              background-color $color-background
              padding 20px 40px
              margin 0 auto
              width 400px
              .loginShowTitle {
                font-size 26px
                font-weight bold
                text-align center
                padding 30px 0px 20px 0px
              }
              .agreeText {
                  display flex
                  justify-content space-between
                  .loginText {
                      cursor pointer
                      color $color-theme
                      font-size 12px
                  }
              }
          }
      }
  }
  .loginBottom {
      position absolute
      bottom 80px
      width 100%
      text-align center
      font-size 12px
      color #666
  }
}
</style>
<style>
.regeisterForm .el-button--primary {
    background-color: #ED6D00;
    border-color: #ED6D00;
}
</style>
